<template>
  <div class="big">
    <div @click="jump" class="ga">
      <p class="sm">{{ city }}</p>
    </div>
    <img :src="imgsrc1" class="img" alt="" />
    <input type="text" class="input" placeholder="搜索商品" />

    <!-- <router-link to="/home/new"></router-link> -->
    <div id="allmap"></div>

    <div class="swiper">
      <div v-swiper:mySwiper="swiperOption">
        <div class="swiper-wrapper">
          <div class="swiper-slide" :key="item.id" v-for="item in banners">
            <img :src="item.image_url" />
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>

    <ul class="channel">
      <li v-for="item in channel" :key="item.id">
        <img :src="item.icon_url" />
        <span>{{ item.name }}</span>
      </li>
    </ul>
    <div class="line"></div>

    <div class="brand">
      <span>品牌制造商直供</span>
    </div>

    <ul class="pic">
      <li v-for="item in brandList" :key="item.id">
        <img :src="item.new_pic_url" />
        <!-- <div>
          <span>{{ item.name }}</span>
        </div> -->
      </li>
    </ul>

    <div class="all">
      <div class="new">
        <p>新品首发</p>
        <router-link :to="{ path: '/home/more', query: { isHot: 'isHot' } }">
          {{ a }}
        </router-link>
      </div>

      <van-swipe
        class="my-swipe"
        indicator-color="white"
        :width="140"
        :loop="false"
      >
        <van-swipe-item v-for="item in newGoods" :key="item.id">
          <img :src="item.list_pic_url" />
          <h3>{{ item.name }}</h3>
          <p>{{ item.goods_brief }}</p>
          <span>¥</span><span>{{ item.retail_price }}</span>
        </van-swipe-item>
      </van-swipe>

      <div class="goods">
        <div class="pop">
          <p>人气推荐,好物精选</p>
          <router-link :to="{ path: '/home/new', query: { isHot: 'isHot' } }">
            {{ b }}
          </router-link>
        </div>
      </div>

      <van-swipe
        class="my-swipe1"
        indicator-color="white"
        :width="140"
        :loop="false"
      >
        <van-swipe-item v-for="item in hotGoods" :key="item.id">
          <img :src="item.list_pic_url" />
          <h3>{{ item.name }}</h3>
          <p>{{ item.goods_brief }}</p>
          <span>¥</span><span>{{ item.retail_price }}</span>
        </van-swipe-item>
      </van-swipe>
      <div class="choose">
        <p>专题精选</p>
        <img :src="imgsrc2" alt="" class="img" />
      </div>
      <van-swipe
        class="my-swipe2"
        indicator-color="white"
        :width="320"
        :loop="false"
      >
        <van-swipe-item v-for="item in topicList" :key="item.id">
          <img :src="item.item_pic_url" />
          <h3>{{ item.title }}</h3>
          <p>{{ item.subtitle }}</p>
          <span>¥</span><span>{{ item.price_info }}</span>
        </van-swipe-item>
      </van-swipe>

      <ul class="good">
        <li v-for="item in newCategoryList" :key="item.id" class="thing">
          <p>{{ item.name }}好物</p>
          <ul class="inner">
            <li v-for="ele in item.goodsList" :key="ele.id">
              <img :src="ele.list_pic_url" alt="sorry" />
              <p>{{ ele.name }}</p>
              <span class="mon">¥</span
              ><span class="ey">{{ ele.retail_price }}</span>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import http from "@/api/request.js";
export default {
  data() {
    return {
      city: "",
      a: "查看全部",
      b: "查看全部",
      imgsrc2: require("../../assets/img/home/right.png"),
      banners: [],
      channel: [],
      brandList: [],
      newGoods: [],
      hotGoods: [],
      topicList: [],
      newCategoryList: [],
      goodsList: [],
      imgsrc1: require("../../assets/img/icons/search.png"),
      swiperOption: {
        loop: true,
        autoplay: true,
        pagination: {
          el: ".swiper-pagination"
        }
      }
    };
  },
  computed: {},
  created() {
    var that = this;
    http.get("/index/index").then(res => {
      console.log(res);
      that.banners = res.banner;
      that.channel = res.channel;
      that.brandList = res.brandList;
      that.newGoods = res.newGoods;
      that.hotGoods = res.hotGoods;
      that.topicList = res.topicList;
      that.goodsList = res.goodsList;
      that.newCategoryList = res.newCategoryList;
    });
  },
  mounted() {
    var _this = this;
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.331398, 39.897445);
    map.centerAndZoom(point, 12);

    var geolocation = new BMap.Geolocation();

    geolocation.getCurrentPosition(
      function(r) {
        console.log(r);
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          _this.city = r.address.city;
          var mk = new BMap.Marker(r.point);
          map.addOverlay(mk);
          map.panTo(r.point);
          alert("您的位置：" + r.point.lng + "," + r.point.lat);
        } else {
          alert("failed" + this.getStatus());
        }
      },
      { enableHighAccuracy: true }
    );
  },
  methods: {
    jump() {
      this.$router.push({
        name: "city"
      });
    }
  }
};
</script>

<style scoped lang="scss">
.sm {
  margin-left: -320px;
}
.ga {
  height: 30px;
}
.img {
  width: 10px;
  height: 10px;
  position: absolute;
  left: 60px;
  top: 13px;
}
.input {
  width: 150px;
  height: 20px;
  position: absolute;
  left: 78px;
  top: 6px;
  border-color: transparent;
}
.add {
  position: absolute;
  top: 10px;
  left: 5px;
  color: black;
  font-size: 12px;
}
.swiper {
  width: 100%;
  height: 200px;
}
.swiper-slide img {
  width: 375px;
  height: 200px;
  // margin-top: 40px;
}

.channel {
  height: 100px;
  margin-top: 80px;
  display: flex;
  justify-content: space-around;
}
.channel span {
  font-size: 12px;
  margin-top: 16px;
}
.channel li img {
  margin-top: -20px;
  width: 30px;
  height: 30px;
}
.channel li {
  display: flex;

  float: left;
  flex-direction: column;
}
.line {
  width: 100%;
  height: 16px;
  background-color: #f5f5f5;
  margin-top: -25px;
}
.brand {
  width: 100%;
  height: 55px;
  background-color: #fff;
}
.brand span {
  text-align: center;
  line-height: 55px;
  margin: 0 auto;
}

.pic img {
  width: 178px;
  height: 116px;
}
.pic img {
  display: flex;
  float: left;
  margin-left: 4px;
  margin-top: 4px;
}
.all {
  width: 100%;
  height: 9550px;
  //   background-color: #f5f5f5;
  //   margin-top: -120px;
}
.new {
  height: 150px;
  width: 100%;
  margin-top: 270px;
  background-color: #eff5fb;
  margin-bottom: 10px;
}
.new p {
  font-size: 16px;
  line-height: 122px;
  color: #8c9bae;
}
.new a {
  display: block;
  width: 90px;
  height: 24px;
  background-color: #d8e4f0;
  color: #8c9bae;
  line-height: 24px;
  margin-left: 140px;
  margin-top: -50px;
}

.my-swipe {
  background-color: #fff;
  height: 248px;
}
.my-swipe img {
  width: 150px;
  height: 150px;
}
.my-swipe h3 {
  margin-left: 20px;
  color: black;
  font-weight: bolder;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.my-swipe p {
  color: #3c3c3c;
  margin-left: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.my-swipe span {
  color: brown;
}

.goods {
  height: 150px;
  width: 100%;
  margin-top: 20px;
  background-color: #fef7e3;
  margin-bottom: 10px;
}
.goods p {
  font-size: 16px;
  line-height: 122px;
  color: #b1a279;
}
.goods a {
  display: block;
  width: 90px;
  height: 24px;
  background-color: #f4e9cb;
  color: #b1a279;
  line-height: 24px;
  margin-left: 140px;
  margin-top: -50px;
}
.my-swipe1 {
  background-color: #fff;
  height: 248px;
}
.my-swipe1 img {
  width: 150px;
  height: 150px;
}
.my-swipe1 h3 {
  margin-left: 20px;
  color: black;
  font-weight: bolder;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.my-swipe1 p {
  color: #8a8a8a;
  margin-left: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.my-swipe1 span {
  color: brown;
}
.choose {
  height: 55px;
  width: 100%;
  background-color: #fff;
}
.choose {
  line-height: 55px;
}

.my-swipe2 {
  background-color: #fff;
  height: 300px;
}
.my-swipe2 img {
  width: 287px;
  height: 170px;
  margin-left: 15px;

  border-radius: 5px;
}
.my-swipe2 h3 {
  margin-left: 20px;
  color: black;
  font-weight: bolder;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.my-swipe2 p {
  color: #8a8a8a;
  margin-left: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.my-swipe2 span {
  color: brown;
}
.choose .img {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 1563px;
  margin-left: 30px;
}

.good {
  width: 100%;
  height: 8000px;
  background-color: #f5f5f5;
}
.thing {
  width: 100%;
  height: 900px;
  margin-top: 10px;
  background-color: #f5f5f5;
}
// .good p {
//   margin-bottom: 100px;
//   margin-left: 15px;
// }

.inner img {
  display: flex;
  float: left;
  justify-content: space-between;
  margin-left: 20px;
  width: 130px;
  height: 130px;
}
.inner li {
  width: 177px;
  height: 215px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  float: left;
  margin-left: 5px;
  margin-top: 5px;
  flex-direction: column;
}
.inner p {
  margin-top: -10px;
  color: #8a8a8a;
  margin-left: -35px;
}
.inner span {
  color: brown;

  margin-left: -140px;
}
.mon {
  float: left;
}
.inner .ey {
  margin-top: -40px;
  margin-left: -110px;
}
</style>